<script setup lang="ts">
import { flowHttp } from '@fl/api/work-flow'
import { ElTable } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import comDetail from './components/com-detail.vue'

const route = useRoute()
const router = useRouter()
const row = route.query.row ? JSON.parse(route.query.row as any) : ''

function detailFn() {
    const detailData1 = {
        data: [
            { label: '项目编号：', text: row.SequenceNo },
            { column: 3, label: '项目登记编号：', text: row.xiangmdjbh },
            { label: '项目名称：', text: row.xiangmmcxq },
            { column: 3, default: 'tag', label: '上架审批状态：', text: row.shangjspzt },
            { column: 3, label: '运营企业：', text: '武汉城建发展集团有限公司' },
            { label: '行政区划：', text: row.xingzqh },
            { label: '项目地址：', text: row.xiangmdz },
            { label: '经纬度：', text: `${row.jingd} ${row.weid}` },
            { label: '项目类型：', text: row.xiangmlx },
            { column: 3, label: '项目属性：', text: row.xiangmsx },
            { column: 3, default: 'remark', label: '项目描述：', text: row.xiangmms, width: 800 },
            { column: 3, label: '项目特色：', text: row.xiangmts },
            { column: 3, default: 'img', label: '项目主图片：', text: JSON.parse(row.xiangmtpurlhx) },
            { column: 6, default: 'img', label: '项目图片：', text: JSON.parse(row.xiangqtpurlhx) },
            { column: 6, default: 'img', label: '项目视频：', text: JSON.parse(row.xiangmspurlhx) },

        ],
        title: '项目基础信息',
    }
    const detailData2 = {
        data: [
            { label: '是否支持定金：', text: row.yixjdj },
            { label: '定金：', text: row.dingj ? `${row.dingj}元` : '' },
            { label: '定金留房时间：', text: row.dingjlfsj ? `${row.dingjlfsj}天` : '' },
            { label: '是否支持意向金：', text: row.shifzcyxj },
            { label: '意向金：', text: row.yixjdjbz ? `${row.yixjdjbz}元` : '' },
            { label: '意向金留房时间：', text: row.yixjlfsj ? `${row.yixjlfsj}天` : '' },
        ],
        title: '项目基础费用设置',
    }
    const detailData3 = {
        data: [
            { label: '项目开业日期：', text: row.kaiysj },
            { label: '运营服务时间区间：', text: row.xiangmyyfwsjqj },
            { label: '项目运营电话：', text: row.yunydh },
            { label: '是否有物业：', text: row.shifywy },
            { label: '物业公司名称：', text: row.danwmc },
            { label: '物业服务电话：', text: row.wuylxrdh },
        ],
        title: '项目运营信息',
    }
    const detailData4 = {
        data: [
            { label: '房管局备案申报日期：', text: row.shenbsj },
            {
                column: 3,
                label: '备案编号：',
                text: row.beiabh,
            },
            { label: '是否享受资金补贴：', text: row.shifxszjbt },
            { column: 3, label: '二维码门牌安装情况：', text: row.erwmmpazqk },
            { label: '物业公司名称：', text: '武汉城建发展集团有限公司' },
            { column: 3, label: '物业服务电话：', text: '18622910293' },
            { label: '房屋总层数：', text: row.fangwzcs },
            { label: '房屋总套数：', text: row.fangwzts },
            { label: '改造后房屋租赁总间数：', text: row.gaizhfwzlzjs },
            { label: '租赁住房总面积：', text: row.zulzfzmj },
            {
                label: '项目总建筑面积：',
                text: row.xiangmzjzmj,
            },
            { label: '租赁项目登记总面积：', text: row.zulxmdjzmj },
            { column: 3, label: '是否取得认定书：', text: row.shifqdrds },
            { label: '认定书编号：', text: row.rendsbh },
            { column: 3, label: '认定书取得时间：', text: row.rendsqdsj },
            { label: '规划许可证号：', text: row.guihxkzh },
            {
                column: 3,
                label: '规划许可证号时间：',
                text: row.guihxkzhsj,
            },
            { column: 3, label: '是否取得产权：', text: row.shifqdcq },
            { label: '权属证书类型：', text: row.quanszslx },
            {
                column: 3,
                label: '权属证书号码：',
                text: row.quanszshm,
            },
            { label: '权利人名称：', text: row.quanlrmc },
            { column: 3, label: '权利人证件号：', text: row.quanlrzjh },

        ],
        title: '租赁核验信息',
    }
    const detailData5 = {
        data: [
            { default: 'img', label: '保租房项目证明：', text: JSON.parse(row.baozfxmzmurlhx) },
        ],
        title: '保租房项目证明',
    }
    const detailData6 = {
        data: [
            { default: 'img', label: '人才公寓项目证明：', text: JSON.parse(row.rencgyxmzmurlhx) },
        ],
        title: '人才公寓项目证明',
    }
    return { detailData1, detailData2, detailData3, detailData4, detailData5, detailData6 }
}
// 详情信息解构
const { detailData1, detailData2, detailData3, detailData4, detailData5, detailData6 } = reactive(detailFn())
console.log(detailData1)
const tableData: any = ref([
])
getBuildData()
// 获取楼栋数据
async function getBuildData() {
    flowHttp('childrenTable', {
        body: {
            data: {
                code: 'c6b0183c29',
                pageInfo: {
                    page: '1',
                    size: '20',
                },
                parentObjectID: row.ObjectID,
            },
        },
    }).then((res: any) => {
        console.log(res)
        const { Datas } = res.data.data
        tableData.value = Datas
    })
}
const labelData = ref([
    { label: '楼栋号', prop: 'dongbh' },
    { label: '栋名称', prop: 'loudh' },
    { label: '单元号', prop: 'danyh' },
    { label: '建筑类型', prop: 'jianzlx' },
    { label: '楼栋总层数', prop: 'loudzcs' },
    { label: '是否有电梯', prop: 'shifydt' },
    { label: '地上总层', prop: 'discs' },
    { label: '地下层数', prop: 'dixcs' },
    { label: '建筑面积', prop: 'jianzmj' },
])
// 获取费项数据
onMounted(async () => {
    await getExpenditureData()
})
async function getExpenditureData() {
    // 接口参数
    const param = {
        body: {
            data: {
                code: '1e8b488fa2',
                pageInfo: {
                    page: '1',
                    size: '20',
                },
                parentObjectID: row.ObjectID,
            },
        },
    }
    const res: any = await flowHttp('childrenTable', param)
    console.log(res)

    const { Datas } = res.data.data
    if (Datas && Datas.length > 0) {
        const data = Datas.slice()
        data.forEach((item: { danw: any, feix: any, shul: any }) => {
            detailData2.data.push({ label: `${item.feix}：`, text: `${item.shul}${item.danw}` })
        })
    }
}
</script>

<template>
    <div class="detail">
        <p style="margin: 20px 0;">
            <el-button @click="router.push('/house-source-center/lease-approval/project-approval')">
                返回列表
            </el-button>
        </p>

        <comDetail :detail-data="detailData1" />

        <div style="padding: 20px;">
            <p style="font-size: 16px;font-weight: 700;margin: 20px 0;color: #303133;">
                楼栋单元信息
            </p>

            <ElTable :data="tableData">
                <el-table-column v-for="item in labelData"
                                 :key="item.label"
                                 :label="item.label"
                                 :prop="item.prop"
                />
            </ElTable>
        </div>

        <comDetail :detail-data="detailData2" />

        <comDetail :detail-data="detailData3" />

        <comDetail :detail-data="detailData4" />

        <comDetail :detail-data="detailData5" />

        <comDetail :detail-data="detailData6" />

        <div v-if="row.shangjspzt === '审批中'"
             class="footer-btn"
        >
            <el-button plain
                       color="#DA0004"
            >
                审批
            </el-button>

            <el-button>驳回</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.detail {
    background-color: #fff;
    padding: 20px 40px;

    .footer-btn {
        text-align: center;
    }
}
</style>
